<template>
  <view>

  
  <!-- 1.0 没有数据时候的提示 -->
  <view
    class="empty-car"
    v-if="isEmpty"
  >
    <image src="/static/img/kong.png" />
    <text class="empty-car-tips">购物车还是空的</text>
    <text class="empty-car-tips extra">快去逛逛吧~</text>
  </view>
  <view v-else>
    <!-- 头部 -->
    <view class="shop-head">
      <view class="shop-head-info">
        <view class="iconfont icon-shop flex-center icon-dianpu"></view>
        <text class="shop-name">品优购生活馆</text>
      </view>
    </view>    
  </view>
  <!-- 商品列表 -->
      <block
        v-for="item in goodsList"
        :key="item.goods_id"
      >
        <view class="goods-item">
          <!-- 左边的选中的图标 -->
          <view
            @click="toggleSelect(item)"
            :class="['pubIcon',item.isSelect?'trueIcon':'falseIcon']"
          ></view>
          <!-- 图片 -->
          <view class="goods-item-pic">
            <image :src="item.goods_small_logo" />
          </view>
          <view class="goods-item-info">
            <text class="goods-item-info-title">{{item.goods_name}}</text>
            <text class="goods-item-info-price">￥{{item.goods_price}}</text>
            <view class="goods-item-info-edit">
              <view class="outer">
                <view
                  @click="substrict(item)"
                  :style="{color:item.goods_number <=1 ? '#999':'black'}"
                >-</view>
                <view class="value">
                  <input
                    v-model="item.goods_number"
                    type="number"
                  /></view>
                <view
                  @click="add(item)"
                  class="add"
                >+</view>
              </view>
              <text @click="deleteGoods(item.goods_id)" >| 删除</text>
            </view>
          </view>
        </view>
      </block>
      <!-- 底部菜单栏 -->
    <view
      v-if="!isEmpty"
      class="fixed-bar"
    >
      <view
        @tap="toggleAllSelect"
        class="allselect"
      >
        <view :class="['pubIcon',allSelect ? 'trueIcon':'falseIcon']">
        </view>
        <text style="margin-left:10rpx;">全选</text>
      </view>
      <view class="statistics">
        <view>
          <text>合计：</text>
          <text style="color:#ff2d4a;font-size:30rpx;">￥{{getTotalPrice}}</text>
        </view>
        <text>包含运费</text>
      </view>
      <view @tap="goToOrder" :class="['jiesuan',getTotalCount > 0 ? '':'disabled']">
        <text>去结算 ({{getTotalCount}})</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getLocalGoods,updateGoods,deleteGoods } from "../../utils/cart.js";
export default {
  data() {
    return {
        isEmpty: true, // 代表购物车为空
        goodsList: [],
        allSelect: true //是否全部
    };
  },
  onShow() {
    this.getGoodsListData();
  },
  computed: {
      getTotalCount(){
          let totalCount = 0
          this.goodsList.forEach(item => {
              if (item.isSelect) {
                totalCount += item.goods_number
              }
          });
          return totalCount
      },
      getTotalPrice(){
        let totalPrice = 0
          this.goodsList.forEach(item => {
              if (item.isSelect) {
                totalPrice += item.goods_number * item.goods_price
              }
          });
          return totalPrice
      }
  },
  methods: {
    async getGoodsListData() {
      // 取出本地的数据
      const localGoods = getLocalGoods();
        
      // 遍历对象，把key放入到数组中
      const ids = [];
      for (const key in localGoods) {
        ids.push(key);
      }
      if (ids.length === 0) {
        //为空
        this.isEmpty = true;
        return;
      }else{
          // 不为空
      this.isEmpty = false;
      }

      const res = await this.$axios.get(`goods/goodslist?goods_ids=${ids.join(",")}`)
        
      res.data.message.forEach(item => {
          item.goods_number = localGoods[item.goods_id]
            item.isSelect = true // 默认情况下让我们每一条商品选中
      })
      this.goodsList = res.data.message
      // console.log(this.goodsList);
    },
    // 选中 & 不选中
    toggleSelect(item) {
      // 先让点击的那一行取反
      item.isSelect = !item.isSelect

      let allSelect = true
      this.goodsList.some(item => {
        if (!item.isSelect) {
          allSelect = false
          return true
        }
      })
      // 给全选赋值
      this.allSelect = allSelect
    },
    // 全选&反选
    toggleAllSelect() {
      this.allSelect = !this.allSelect

      this.goodsList.forEach(item => {
        item.isSelect = this.allSelect
      })
    },
    // 减
    substrict(item) {
      if (item.goods_number <= 1) return
      item.goods_number--

      updateGoods(item)
    },
    // 加
    add(item) {
      item.goods_number++

      updateGoods(item)
    },
    // 删除
    deleteGoods(goods_id) {
      wx.showModal({
        title: '提示',
        content: '是否删除该商品?',
        success:res => {
          if (res.confirm) {
            //1、删除本地的商品信息
            deleteGoods(goods_id)

            //2、根据id查找索引
            const deleteIndex = this.goodsList.findIndex(item=> item.goods_id === goods_id)

            this.goodsList.splice(deleteIndex,1)

            //3、判断是否为空
            this.isEmpty = this.goodsList.length === 0
          } else if (res.cancel) {

          }
        }
      })
    },
    goToOrder(){
      //要结算的商品id数组
      const ids = []
      this.goodsList.forEach(item=>{
        if(item.isSelect){
          ids.push(item.goods_id)
        }

      })
      if(ids.length === 0){
        wx.showToast({
          title: '请选择商品结算', //提示的内容,
          icon: 'none', //图标
        });
        return
      }
      // 跳转到下单和支付页面
      wx.navigateTo({ url: `/pages/pay/main?ids=${ids.join(',')}` });
    }
  }
};
</script>



<style lang="less" scoped>
@PADDING-LEFT: 20rpx;
.empty-car {
  display: flex;
  flex-direction: column;
  height: 500rpx;
  justify-content: center;
  align-items: center;
  image {
    width: 125rpx;
    height: 124rpx;
  }
  &-tips {
    margin-top: 30rpx;
    font-size: 28rpx;
    color: #666;
  }
}
.extra {
  font-size: 24rpx;
  color: #999;
}
.shop-head {
  background-color: #fff;
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 @PADDING-LEFT;
  border-bottom: 1px solid #ddd;
  &-info {
    display: flex;
    align-items: center;
    .shop-name {
      margin-left: 10rpx;
    }
  }
}
.goods-item {
  height: 220rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-left: @PADDING-LEFT;
  border-bottom: 1px solid #eee;
  &-pic {
    width: 160rpx;
    height: 160rpx;
    margin-left: 10rpx;
    border: 1px solid #ddd;
    padding: 10rpx;
    border-radius: 5rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  &-info {
    flex: 1;
    height: 180rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0rpx @PADDING-LEFT;
    &-title {
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    &-price {
      color: #ff2d4a;
      font-size: 30rpx;
    }
    &-edit {
      display: flex;
      justify-content: space-between;
      .outer {
        border: 1px solid #ddd;
        display: flex;
        align-items: center;
        border-radius: 5rpx;
        view {
          height: 50rpx;
          width: 50rpx;
          line-height: 50rpx;
          text-align: center;
        }
        .value {
          width: 65rpx;
          border-left: 1px solid #ddd;
        }
        .add {
          border-left: 1px solid #ddd;
        }
      }
    }
  }
}
.pubIcon {
  background: url(https://mcart.jiuxian.com/statics/images/cart/catIcon.png)
    no-repeat 0 0;
  background-size: 300rpx 300rpx;
  width: 55rpx;
  height: 55rpx;
}
.trueIcon {
  background-position: 0 -225rpx;
}
.falseIcon {
  background-position: -50rpx -225rpx;
}
.fixed-bar {
  display: flex;
  height: 98rpx;
  width: 750rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  .allselect {
    padding-left: @PADDING-LEFT;
    width: 200rpx;
    height: 98rpx;
    display: flex;
    align-items: center;
  }
  .statistics {
    flex: 1;
    display: flex;
    // align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .jiesuan {
    width: 200rpx;
    height: 98rpx;
    background-color: #ff2d4a;
    text-align: center;
    line-height: 98rpx;
    text{
      color: #fff;
    }
  }

  .disabled {
    background-color: #ddd;
  }
}
</style>

